<template>
  <div>
    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="changeshowshadow"
    />
    <div class="fenlei">
      <!-- 分类页搜索栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click="CategoryBtn(item.id)"
        />
      </van-sidebar>

      <!-- 右边部分 -->
      <ul>
        <!-- banner -->
        <div>
          <img
            :src="currentCategory.banner_url"
            alt=""
            width="95%"
            height="140px"
          />
          <h5>{{ currentCategory.front_desc }}</h5>
        </div>

        <!-- 标题 -->
        <div class="mytitle">
          <span></span>
          <h3>{{ currentCategory.name }}</h3>
        </div>

        <!-- 当前分类的子类 -->
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { GetFenleiData, GetCurrentData } from "../request/api";
export default {
  data() {
    return {
      activeKey: 0,
      // 左侧导航
      categoryList: [],
      // 全部分类数据
      currentCategory: [],
      // 当前分类icon  --> 全部分类的子类
      subCategoryList:[]
    };
  },
  created() {
    // 发送请求获取全部分类 
    GetFenleiData().then((res) => {
      console.log(res.data);
      let { categoryList } = res.data;
      this.categoryList = categoryList;
    });
    // 发送请求获取当前分类
    GetCurrentData({
      id: 1005000,
    }).then((res) => {
      console.log(res);
      this.currentCategory = res.data.currentCategory;
      this.subCategoryList = res.data.currentCategory.subCategoryList
    });
  },
  computed: {
    ...mapState({
      isShowShadow: (state) => state.showshadow.isShowShadow,
    }),
  },
  methods: {
    // 点击当前分类 发送请求获取子类数据
    CategoryBtn(currenId) {
      // currenId 就是当前分类的id
      GetCurrentData({
        id: currenId,
      }).then((res) => {
        this.currentCategory = res.data.currentCategory;
        this.subCategoryList = res.data.currentCategory.subCategoryList
      });
    },
    ...mapMutations({
      changeisShowShadow: "showshadow/changeisShowShadow",
    }),
    changeshowshadow() {
      this.$router.push("/home/searchpopup");
      this.changeisShowShadow(true);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.fenlei {
  width: 100%;
  background-color: #fff;
  height: 90vh;
  display: flex;
  .van-sidebar {
    width: 20%;
  }
  ul {
    width: 80%;
    /* border: 1px solid red; */
    div {
      width: 100%;
      position: relative;
      img {
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      h5 {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
      }
    }
    .mytitle {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
}
</style>